<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>toMsg</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-table-view .userHead {
				line-height: 50px;
			}
			
			.userHead img {
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 25px;
			}
			
			.mui-table-view .mr20 {
				margin-right: 20px;
				font-size: 14px;
				color: #333;
			}
			
			.mui-btn-block.mb0 {
				margin-bottom: 0;
				color: red;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的账号</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture" class="mui-navigate-right userHead">
						头像
						<img class="mui-pull-right mr20" src="images/qihoo.png" alt="" />
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="userName">
						用户名
						<span class="mui-pull-right mr20">用户名</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="pswSetting">
						账户密码
						<span class="mui-pull-right mr20">未设置</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="phoneNum">
						手机号
						<span class="mui-pull-right mr20">152****2065</span>
					</a>
				</li>
			</ul>
		</div>
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" onclick="captureImage()">拍照</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" onclick="galleryImg()">相册</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<button type="button" class="mui-btn mui-btn-block mui-bar mui-bar-tab mb0">退出当前账号</button>
		<script type="text/javascript">
			mui.init({
				preloadPages: [{
					url: 'userName.html',
					id: 'userName'
				}, {
					url: 'pswSetting.html',
					id: 'pswSetting'
				}, {
					url: 'phoneNum.html',
					id: 'phoneNum'
				}]
			})
			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener("plusready", onPlusReady, false);
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function onPlusReady() {
				var cmr = plus.camera.getCamera();
			}
			// 拍照
			function captureImage() {
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				console.log("Resolution: " + res + ", Format: " + fmt);
				cmr.captureImage(function(path) {
						plus.io.resolveLocalFileSystemURL(path, function(entry) {
							console.log(entry.name); // 文件名
							console.log(entry.toLocalURL()); // 文件路径
							var imgPath = entry.toLocalURL();
							mui('.userHead img')[0].src = imgPath;
							var userHTML = plus.webview.getWebviewById('user.html');
							mui.fire(userHTML, 'setImg', {
								imgPath: imgPath
							})
						})
					},
					function(error) {
						alert("Capture image failed: " + error.message);
					}, {
						filename: '_doc/camera/', // 拍照或摄像文件保存的路径
						resolution: res,
						format: fmt // 拍照或摄像的文件格式
					}
				);
			}
			// 从相册中选择图片 
			function galleryImg() {
				// 从相册中选择图片
				console.log("从相册中选择图片:");
				plus.gallery.pick(function(path) {
					console.log(path);
					mui('.userHead img')[0].src = path;
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image"
				});
			}
			// 打开子页面
			var openWindow = function(parent, child) {
				mui(parent).on('tap', child, function() {
					var id = this.getAttribute('id'),
						urlName = id + '.html';
					mui.openWindow({
						url: urlName,
						id: urlName,
						show: {
							autoShow: true,
							aniShow: "auto",
						},
						waiting: {
							autoShow: true,
							title: '正在加载...'
						}
					})
				})
			};
			openWindow('.mui-table-view-cell','#userName');
			openWindow('.mui-table-view-cell','#pswSetting');
			openWindow('.mui-table-view-cell','#phoneNum');
		</script>
	</body>

</html>